<template>
  <el-drawer
      :with-header="false"
      :modal="false"
      :show-close="false"
      size="100%"
      :modal-append-to-body="false"
      :destroy-on-close="true"
      :visible.sync="nodeDrawer"
      direction="rtl"
      custom-class="drawer">
    <div class="cont-deploy">
      <div class="right">
        <div class="title">应用信息</div>
      </div>
      <div class="r-main">
        <div class="comInfo">
          <div class="body">
            <div class="infoItem" v-if="comInfoTab.length > 0">
              <div class="title">函数信息</div>
              <el-table :data="comInfoTab" style="width: 100%">
                <el-table-column prop="functionName" label="函数名">
                </el-table-column>
                <el-table-column prop="paramInputClass" label="入参类型">
                </el-table-column>
                <el-table-column prop="paramOutputClass" label="出参类型">
                </el-table-column>
              </el-table>
            </div>
            <div class="infoItem" v-if="envInfo">
              <div class="title">监控信息</div>
              <div class="info">
                <span>最小CPU：{{ envInfo.requireCPU }}</span>
                <span>最小GPU：{{ envInfo.requireGPU }}</span>
                <span>最小存储单元：{{ envInfo.requireDisk }}</span>
              </div>
            </div>
            <div class="infoItem" v-if="monInfo">
              <div class="title">环境信息</div>
              <div class="info">
                <span>监控频率：{{ monInfo.monitorRate }}秒</span>
                <span>监控类型：{{ monInfo.monitorType }}</span>
              </div>
            </div>
            <div class="infoItem" v-if="switchInfo">
              <div class="title">切换信息</div>
              <div class="info">
                <span>组件切换名称：{{ switchInfo.switchName }}</span>
                <span>组件切换地址：{{ switchInfo.switchAddress }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="iptIn">
          <el-form :model="form" label-width="80px" class="ipt-in-form">
            <el-form-item
                v-for="(item, index) in comInfoTab"
                :key="index"
                v-show="item.show"
                :label="item.functionName">
              <el-input
                  v-model="iptAll[item.id]"
                  placeholder="请参照上表输入入参 ',' 隔开"
              ></el-input>
              <div class="red">{{ item.tip }}</div>
            </el-form-item>
          </el-form>
          <div class="bt">
            <el-button type="primary" @click="NodesubInfo">保存</el-button>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  props: ["nodeDrawer", "currentFncInfo", "AppInfo", "curNode", "edg", "lineNodeInfo"],
  data() {
    return {
      activeName: "basicInformation",
      activeNames: [],
      formData: {},
      form: {},
      iptAll: {},
      appInfo: [],
      CsArr: "",
      lineNode: [],
    };
  },
  computed: {
    comInfoTab() {
      return this.currentFncInfo.pfunctionList || [];
    },
    envInfo() {
      return this.$props.currentFncInfo.prequire;
    },
    monInfo() {
      return this.$props.currentFncInfo.pmonitor;
    },
    switchInfo() {
      return this.$props.currentFncInfo.pswitch;
    },
  },
  mounted() {
    console.log(this.appInfo);
    this.$nextTick(() => {
      this.appInfo.forEach((item) => {
        this.$set(this.iptAll, String(item.ftId), item.avalue);
      });
    });
  },
  created() {
    // console.log(this.comInfoTab);
    this.appInfo = this.$props.AppInfo;
    let curNode = this.$props.curNode;
    this.lineNode = this.$props.lineNodeInfo;
    // console.log(this.lineNode);
    let edg = this.$props.edg;
    //进来 判断当前节点是否有设置参数信息   没有则输入数据直接调用接口 保存
    //有参数信息  判断那个函数的那个参数被占用了 ，没占用的输入参数信息 调用接口保存

    //根据所有边  找到当前节点相关的边
    let curLin = [];
    edg.forEach((item) => {
      if (item.labels.length > 0) {
        if (item.source.cell == curNode.id || item.target.cell == curNode.id) {
          curLin.push(item);
        }
      }
    });
    // console.log(curLin);

    //获取到所有边里面的目标函数的id 与位置
    // let fncAllId = [];
    // curLin.forEach((item) => {
    //   fncAllId.push({
    //     fid: item.labels[0].attrs.labelText.val.mbhs,
    //     wz: item.labels[0].attrs.labelText.val.rcwz,
    //   });
    // });
    let fncAllId = [];
    this.lineNode.forEach((item) => {
      fncAllId.push({
        fid: item.relationLineTarget,
        wz: item.relationLineInputIndex
          ? item.relationLineInputIndex.split(",")
          : [],
      });
    });
    // console.log(  this.lineNode);
    // console.log(fncAllId);
    // console.log(this.comInfoTab);
    // console.log(this.comInfoTab);
    //将函数的参数转化为对应的下标数组
    let CsArr = [];
    this.comInfoTab.forEach((item, index) => {
      // CsArr.push({
      //   fid: item.id,
      //   wz: item.paramInputClass ? item.paramInputClass.split(",") : [],
      // });
      CsArr.push({
        fid: item.id,
        wz: item.paramInputClass ? item.paramInputClass.split(",").map((li, i) => {
          // return  li.split(' ')[1] || ''
          return {
            name: li.split(' ')[1] || '',
            index: i
          }
        }) : [],
      });

      let arr = [];
      CsArr[index].wz.forEach((res, inx) => {
        if (res) {
          arr.push(res);
        } else {
          arr.push(inx);
        }
      });
      CsArr[index].wz = arr;
    });

    //将所有函数遍历  去删除已经被指向了的位置
    CsArr.forEach((item) => {
      fncAllId.forEach((res) => {
        if (item.fid == res.fid) {
          res.wz.forEach((wzit) => {
            item.wz.splice(wzit, 1);
          });
        }
      });
    });

    //给输入框加判断  判断是否还有参数未输入  全被占用就隐藏
    this.comInfoTab.forEach((item) => {
      let tip = [];
      CsArr.forEach((res) => {
        if (item.id == res.fid) {
          if (res.wz.length > 0) {
            item.show = true;
            res.wz.forEach((tep) => {
              if (/^\d+(\.\d+)?$/.test(tep)) {
                tip.push(tep + 1);
              } else {
                tip.push(tep);
              }
            });
            item.tip = "当前可输入参数位置：" + tip.map((item) => item.name || item.index).join(",");
          } else {
            item.show = false;
          }
        }
      });
    });
    CsArr.forEach((item) => {
      // item.wz = item.wz.join(",");
    });
    this.CsArr = CsArr;
    console.log(this.CsArr)
  },
  methods: {
    NodesubInfo() {
      this.$emit("NodesubInfo", this.iptAll, this.CsArr);
    },
  },
};
</script>
<style lang="less" scoped>
  .iptIn {
    height: calc(100% - 350px);
    overflow: scroll;
  }

  .bt {
    display: flex;
    justify-content: center;
    margin-top: 15px;
  }

  .el-form-item {
    width: 80%;
    margin-bottom: 10px !important;
  }

  /deep/ .el-drawer__body {
    overflow: hidden !important;
  }

  /deep/ .el-table thead {
    color: #333;
  }

  /deep/ .el-table {
    color: #333;
  }

  .drawer {
    .cont-deploy {
      height: 100%;

      .title {
        background: #4d5c71;
        color: white;
        height: 35px;
        line-height: 35px;
        padding-left: 20px;
      }

      .r-main {
        height: 100%;

        .comInfo {
          width: 100%;
          height: 350px;
          overflow-y: scroll;
          box-sizing: border-box;
          padding: 10px;

          .title,
          .infoItem {
            margin-bottom: 10px;
          }

          .title {
            font-weight: 700;
            font-size: 16px;
          }

          .info {
            display: flex;

            span {
              display: block;
              min-width: 33%;
            }
          }
        }
      }
    }
  }

  .red {
    color: rgb(228, 57, 57);
  }

  .el-drawer__wrapper {
    right: 0;
    left: auto;
    width: 40%;
    position: absolute;
  }

  .ipt-in-form {
    /deep/ .el-form-item .el-form-item__label {
      color: #333333 !important;
    }
  }
</style>